// JavaScript Document
window.onload=function(){
	var iPic=12;
	var picShow=(function(){
		var oPic=document.getElementById('pic');
		var aLi=oPic.children;
		var izIndex=2;
		var oP=getByClass('change')[0];
		
		function exchange(){//拖拽交换位置
			for(var i=0;i<aLi.length;i++){
				drag(aLi[i]);
			}
		
		}
		function drag(obj){
			var arr=[];
			for(var i=0;i<aLi.length;i++){
				aLi[i].index=i;
				arr.push([aLi[i].offsetLeft,aLi[i].offsetTop]);
			}
			obj.onmousedown=function(ev){
				var ev=ev||window.event;
				var disX=0;
				var disY=0;
				obj.style.zIndex=izIndex++;
				disX=ev.clientX-this.offsetLeft;
				disY=ev.clientY-this.offsetTop;
				
				if (obj.setCapture) {
					obj.setCapture();
				}
				
				document.onmousemove=function(ev){
					var ev=ev||window.event;
					var L=ev.clientX-disX;
					var T=ev.clientY-disY;
					
					obj.style.left=L+'px';
					obj.style.top=T+'px';
				}
				document.onmouseup=function(){
					document.onmouseup=document.onmousemove=null;
					if(obj.releaseCapture){
						obj.releaseCapture();
					}
					
					var nLi=nearLi(obj);//返回距离最近的图片元素
					
					var tmp='';
					
					if(nLi){//如果存在最近的元素，交换位置
						startMove(nLi,{left:arr[obj.index][0],top:arr[obj.index][1]});
						startMove(obj,{left:arr[nLi.index][0],top:arr[nLi.index][1]});
						
						tmp=obj.index;//交换索引
						obj.index=nLi.index;
						nLi.index=tmp;
					}else{
						startMove(obj,{left:arr[obj.index][0],top:arr[obj.index][1]});
					
					}
				}
				
				return false;
			}
		}
		
		function pz(obj1,obj2){//碰撞检测
			var L1=obj1.offsetLeft;
			var R1=L1+obj1.clientWidth;
			var T1=obj1.offsetTop;
			var B1=T1+obj1.offsetHeight;
			
			var L2=obj2.offsetLeft;
			var R2=L2+obj2.clientWidth;
			var T2=obj2.offsetTop;
			var B2=T2+obj2.offsetHeight;
			
			if(R1<L2||L1>R2||B1<T2||T1>B2){
				return false;
			}else{
				return true;
			}
		
		}
		function dis(obj1,obj2){//计算碰撞到的图片的距离
			var a=obj1.offsetLeft-obj2.offsetLeft;
			var b=obj1.offsetTop-obj2.offsetTop;
			
			return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
		}
		
		function nearLi(obj){ //找距离最近的图片
			var value=9999;
			var index=-1;
			for(var i=0;i<aLi.length;i++){
				if(pz(obj,aLi[i])&&aLi[i]!=obj){//检测碰撞到的每一个图片,如果返回真，代表和此张图片碰撞上
					var c=dis(obj,aLi[i]);//找距离
					if(c<value){//找距离最短的
						value=c;
						index=i;
					}
				}
			}
			if(index==-1){
				return false;
			}else{
				return aLi[index];
			}
		}
		
		function randomChange(){//随机交换位置
			var arr=[];
			for(var i=0;i<aLi.length;i++){
				aLi[i].index=i;
				arr.push([aLi[i].offsetLeft,aLi[i].offsetTop]);//当记录cookie时 数组里面只存着少量的数，当增加时找不到相应的位置，将arr变成全局变量存位置
			};
			
			oP.onclick=function(){
				var randomArr=[]; 
				for(var j=0;j<iPic;j++){
					randomArr[j]=[j];
				}
				randomArr.sort(function(num1,num2){
					return Math.random()-0.5;
				});
				randomArr.sort(function(num1,num2){
					return Math.random()-0.5;
				});
				randomArr.sort(function(num1,num2){
					return Math.random()-0.5;
				});
				randomArr.sort(function(num1,num2){
					return Math.random()-0.5;
				});
				randomArr.sort(function(num1,num2){
					return Math.random()-0.5;
				});
				randomArr.sort(function(num1,num2){
					return Math.random()-0.5;
				});
				
				
				for(var i=0;i<aLi.length;i++){
					startMove( aLi[i] , {left :arr[randomArr[i]][0] , top:arr[randomArr[i]][1] } );
					aLi[i].index = randomArr[i];
					
				}	
			}
		
		}
		return {
				e:exchange,
				r:randomChange
		}
	})();
	//设置图片数量
	var setNum=(function(){
		var oMain=document.getElementById('main');
		var oPicList=document.getElementById('pic');
		var arrPic=["img/baidu.jpg","img/ifeng.jpg","img/taobao.jpg","img/qzone.jpg",
					"img/tmall.jpg","img/google.jpg","img/meituan.jpg","img/tudou.jpg",
					"img/qiy.jpg","img/game.jpg","img/amazon.jpg","img/dubadaquan.jpg"];
		var arrPic2=["img/kankan.jpg","img/duba.jpg","img/kankan.jpg","img/letv.jpg","img/qiy.jpg","img/pps.jpg","img/time.jpg"];
		var oNum=document.getElementById('setNum');
		var aNum=oNum.getElementsByTagName('dd');
		var oSwrap=document.getElementById('sWrap');
		
		function ifCookie(){
			if(getCookie('cell')){//cell:0 4 8 12=>0 1 2 3 
				var iCell=getCookie('cell');
				
				for( var j=0;j<aNum.length;j++){
					removeClass(aNum[j],'active');
				}
				addClass(aNum[iCell],'active');
				init(iCell*4);
			}else{
				init(12);

			}
			
			function init(n){//表示开始的时候想创建几个
				creatLi(n);
				setPos(n/4);
				picShow.e();
				picShow.r();
			}
		}
		function btnClick(){ //点击设置格子数量
			
			for(var i=0;i<aNum.length;i++){
				aNum[i].index=i;
				
				aNum[i].onclick=function(){					
					for( var j=0;j<aNum.length;j++){
						removeClass(aNum[j],'active');
					}
					addClass(aNum[this.index],'active');
					
					
					creatLi(this.index*4);
					picShow.e();
					picShow.r();
					setPos(this.index);
					delCookie('cell');
					setCookie('cell',this.index,5)
				}
			
			};
		};
		
		
		
		function creatLi(n){//创建n个
			
			var aLi=oPicList.getElementsByTagName('li');
			while(last(oPicList)){
				oPicList.removeChild(last(oPicList));
			}
			for(var i=0;i<n;i++){
				var oLi=document.createElement('li');
				var oImg=document.createElement('img');
				var iRow=parseInt(i/4); 
				var iCol=parseInt(i%4);//记录列 从0开始
					oImg.src=arrPic[i];
					oLi.style.left=209*(iCol)+'px';
					oLi.style.top=149*(iRow)+'px'
					oPicList.appendChild(oLi);
					oLi.appendChild(oImg);
			}
			
			iPic=n;
					
		}

		
		function setPos(n){//使整体居中
			if(n>=1){
				if(n!=3){
					oMain.style.marginTop=0+'px';
				}else{
					oMain.style.marginTop=20+'px';
				}
				oPicList.style.overflow="hidden";
				startMove(oPicList,{height:n*144+(n-1)*5},function(){
					wrapPos();
					oPicList.style.overflow="visible";
				})
			}else{
				oPicList.style.height=0;
				oMain.style.marginTop=-60+'px';
				startMove(oPicList,{height:0},function(){
					wrapPos();
				})
			}
			function wrapPos(){//调整整个div使其居中
				iH=parseInt(getStyle(oMain,'height'));
				var iTop=Math.ceil((document.documentElement.clientHeight-iH)/2);
				startMove(oMain,{top:iTop});
			}
		}
		
		return {
			i:ifCookie,
			c:btnClick
		}	
	})();
	setNum.i();
	setNum.c();
	//百度搜索
	var searchKey=(function(){
		var oT=document.getElementById('text');
		
		var oUl=document.getElementById('result');
		var oBtn=document.getElementById('btn');
		
		function searchOn(){
			bindEvent(oT,'keyup',init);
			bindEvent(document,'click',function(){
				oUl.style.display="none";
			});
			function init(){
				if(oT.value!=''){
					var oScript=document.createElement('script');
					oScript.src="http://suggestion.baidu.com/su?wd="+oT.value+"&p=3&cb=fn1&sid=2248_1437_2448_2450_1788_2250&t=1369196435086"
					document.body.appendChild(oScript);
					oBtn.onclick=function(ev){
						var ev=ev||event;
						ev.cancelBubble=true;
						window.open('http://www.baidu.com/s?wd='+oT.value+'&rsv_bp=0&ch=&tn=baidu&bar=&rsv_spt=3&ie=utf-8&rsv_sug3=5&rsv_sug=0&rsv_sug1=5&rsv_sug4=807&oq=s&rsp=0&f=3&rsv_sug2=1&rsv_sug5=0&inputT=2205480');
					}
				}else{
					
					oUl.style.display="none";
				}
			}
			init();
		}	
		return searchOn;
	})();
	
	searchKey();
	//设置更换背景
	var setBg=(function(){
		
		var oBgList=document.getElementById('bgList');
		var aImg=oBgList.getElementsByTagName('img');
		var oSetBtn=getByClass('setUp')[0];
		var oBody=document.body;
		var oSetList=getByClass('setList')[0];
		var bBtn=false;
		
		
		function setBtn(){
			oSetBtn.onclick=function(){
				if(!bBtn){
					oSetList.style.display="block";
					addClass(oSetBtn,'active')
					startMove(oSetList,{height:62});
				}else{
					oSetList.style.display="none";
					startMove(oSetList,{height:0});
					removeClass(oSetBtn,'active');
				}
				bBtn=!bBtn;
			}
			
		
		}

		function setUp(){
			
			if(getCookie('bg')){
				oBody.style.background=getCookie('bg');
			}
		
			for(var i=0;i<aImg.length;i++){
				aImg[i].index=i;
				bindEvent(aImg[i],'click');	
				aImg[i].onclick=function(){
					oBody.style.background='url('+this.src+')';
					delCookie('bg');
					setCookie('bg',oBody.style.background,5)
				}
			}
			
			
		}
		
		
			
		return {
			l:setUp,
			o:setBtn
		}
	})();
	
	setBg.l();
	setBg.o();
	
	var workIntro=(function(){
		var oWork=document.getElementById('work');
		var oMask=document.getElementById('mask');
		var oMenu=document.getElementById('wMenu');
		var oList=getByClass('list')[0];
		var oClose=getByClass('close')[0];
		function rePos(){
			bindEvent(window,'resize',menuMove);
			bindEvent(window,'scroll',menuMove);
			function menuMove(){
				var iH=Math.max(viewH(),scrollH());
				var iLeft=Math.ceil((viewW()-oMenu.offsetWidth)/2);
				var iTop=Math.ceil((viewH()-oMenu.offsetHeight)/2+scrollY());
				oMask.style.height=iH+'px';
				startMove(oMenu,{top:iTop,left:iLeft})
			
			}
		}
		
		function btnClick(){
			oWork.onclick=function(){			
				oMask.style.display='block';
				oMenu.style.display='block';
				oMenu.style.left=(viewW()-oMenu.offsetWidth)/2+'px';
				oMenu.style.top=(viewH()-oMenu.offsetHeight)/2+'px';
				iLs=Math.ceil((viewW()-450)/2);
				iTs=Math.ceil((viewH()-590)/2);
				startMove(oMenu,{height:540,top:iTs},function(){
					startMove(oMenu,{width:430,left:iLs},function(){
						startMove(oList,{opacity:100});
					});
				});
			}
		
		};
		
		function closeClick(){
			oClose.onclick=function(){
				oList.style.opacity=0;
				oList.style.filter = 'alpha(opacity=' +0+ ')';
				oMenu.style.top=0;
				oMenu.style.height=0;
				oMenu.style.width=0;
				oMask.style.display='none';
				oMenu.style.display='none';
				
			}
		}
		
		return{
			c:closeClick,
			b:btnClick,
			r:rePos
		}
	})();
	workIntro.c();
	workIntro.b();
	workIntro.r();
}



